<template>
  <div class="review">
    <!-- 评审作品 -->
    <el-dialog v-model="dialogFormVisible" align-center title="评审作品" @close="closeDialog">
      <el-form :model="formData" :rules="userRules" ref="ruleFormRef" :size="formSize" label-width="120px"
        class="demo-ruleForm">
        <el-form-item label="作品名称：" prop="workName">
          <span>{{ Data.workName }}</span>
        </el-form-item>
        <el-form-item label="作品主题：" prop="workTopic">
          <span>{{ Data.workType }}</span>
        </el-form-item>
        <el-form-item label="作品简介：" prop="workDesc">
          <span class="desc">{{ Data.workDescription }}</span>
        </el-form-item>
        <el-form-item label="查看作品：" prop="workImg">
          <div class="works">
            <img :src="Data.workCouerPath" @click="toEvent(Data.workId)" />
          </div>
        </el-form-item>
        <el-form-item label="作品点评：" class="view" required prop="score">
          <el-input class="score" v-model.number="formData.score" placeholder="请输入评分" />
        </el-form-item>
        <el-form-item prop="criticize">
          <el-input class="comment" v-model="formData.criticize" type="textarea" :rows="4" placeholder="请输入评语" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirm(ruleFormRef)">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { PostView, GetView } from "@/api/front/contest";
import { useRouter } from "vue-router";

const emits = defineEmits(["refresh"]);
//跳转
const router = useRouter();
const toEvent = (contestNewsId) => {
  console.log(contestNewsId);
  router.push({
    path: '/work-detail/' + contestNewsId + '/work-introduce'
  })
};
//控制弹窗
const dialogFormVisible = ref(false);
const formSize = ref("default");
const ruleFormRef = ref();

const formData = ref({
  workScoreId: "",
  workId: "",
  userId: "",
  score: "",
  criticize: "",
  status: "0",
  workName: "",
  contestName: ""
});
// 定义form表单的验证规则
const userRules = reactive({
  // 作品验证规则
  score: [
    { required: true, message: "请输入评审分数", trigger: "blur" },
    { type: "number", message: "请输入数字", trigger: "blur" },
  ],
  criticize: [
    { required: true, message: "请输入作品描述", trigger: "blur" },
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
  ],
});


//存放由id获取的作品信息
const Data = ref('')
//根据参数获取对应作品信息
const openDialog = async (id, item) => {
  dialogFormVisible.value = true;
  console.log("接收", id, item);
  formData.value.workScoreId = item.workScoreId
  formData.value.workId = item.workId
  formData.value.userId = item.userId
  formData.value.score = item.score
  formData.value.criticize = item.criticize
  formData.value.status = item.status
  formData.value.workName = item.workName
  formData.value.contestName = item.contestName
  const workId = item.workId
  GetView({ workId: workId }).then(res => {
    console.log('获取', res);
    Data.value = res.data[0]
  }).catch((err) => {
    console.log('err', err)
  })
};


const closeDialog = () => {
  dialogFormVisible.value = false;
  // 初始化表单
  formData.value = {
    workScoreId: "",
    workId: "",
    userId: "",
    score: "",
    criticize: "",
    status: "0",
    workName: "",
    contestName: ""
  };
};

const confirm = async (formRef) => {
  if (!formRef) {
    return;
  }
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      console.log("submit!");
      // 评审作品
      console.log("表单数据", formData.value);
      formData.value.status = 1
      const res = await PostView(formData.value);
      console.log('test', res);
      if (res.data == "修改成功") {
        ElMessage.success("评审成功");
        emits("refresh");
        closeDialog();
      } else {
        ElMessage.error("评审失败");
      }
    } else {
      console.log("error review!", fields);
    }
  });
};
defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
.review {
  .demo-ruleForm {
    .avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .desc {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .works {
      vertical-align: top;

      img {
        width: 200px;
        height: 120px;
      }

      img:hover {
        cursor: pointer;
        transform: scale(1.02);
        box-shadow: 0 0 10px #ccc;
      }
    }

    .view {
      margin-top: -10px;
    }

    .score {
      width: 200px;
    }

    .comment {
      margin-top: -2px;
      width: 545px;
    }
  }

  .el-button {
    margin-top: -50px;
    border-radius: 20px;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
